<script setup lang="ts">
import { check } from '@/api/api-manage/my-list'
import { ModalShowType } from '@/types/common'
import { message } from '@/utils/message'
import { ElButton, ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'
import { computed, ref } from 'vue'

const props = defineProps<{
  modalShow: ModalShowType
  termId: number | null
  onSearch?: () => Promise<void>
}>()

const emit = defineEmits<{
  (e: 'update:modalShow', type: ModalShowType): void
}>()

const modalShow = computed({
  get() {
    return props.modalShow
  },
  set(value) {
    emit('update:modalShow', value)
  },
})
const ruleFormRef = ref<FormInstance>()

const formData = ref({
  opinion: '',
})

const loading = ref(false)

const submitForm = async (status: string) => {
  if (status == '2') {
    if (formData.value.opinion == '') {
      message('审核意见不能为空', { type: 'warning' })
      return
    }
  }
  loading.value = true
  await check({ id: props.termId, status, opinion: formData.value.opinion }).finally(
    () => (loading.value = false)
  )
  onClose()
}

const resetFields = () => {
  ruleFormRef.value.resetFields()
  formData.value = {
    opinion: '',
  }
}

const onClose = () => {
  if (props.modalShow === ModalShowType.Edit) {
    props.onSearch()
  }
  modalShow.value = ModalShowType.Hide
  resetFields()
}
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    title="接口发布审批"
    class="common-dialog"
    :model-value="modalShow !== ModalShowType.Hide"
    :before-close="onClose"
    size="50%"
  >
    <el-form ref="ruleFormRef" :model="formData" label-width="120px">
      <el-form-item>
        <h1>是否通过审核并发布该接口？</h1>
      </el-form-item>
      <el-form-item label="审批意见" prop="applyUseScene">
        <el-input
          v-model="formData.opinion"
          type="textarea"
          placeholder="输入内容"
          maxlength="200"
          show-word-limit
          :rows="4"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="modalShow === ModalShowType.View" @click="modalShow = ModalShowType.Hide">
        关闭
      </el-button>
      <template v-if="modalShow === ModalShowType.Edit">
        <el-button :loading="loading" @click="submitForm('2')">拒绝通过</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm('1')"> 通过审核 </el-button>
      </template>
    </template>
  </el-dialog>
</template>
